<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>潮人分享-欢聚网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" th:href="@{/css/mui.min.css}" />
		<link rel="stylesheet" th:href="@{/css/common.css}" />
		<link rel="stylesheet" th:href="@{/css/icons-extra.css}" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">潮人分享</h1>
			<button class="mui-btn  mui-btn-link mui-pull-right" id="reply">回复</button>
		</header>
		<div class="mui-content cj-bg-white ">
			<div class="cj-topic-title" id="title">标题</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-row">
						<div class="mui-col-sm-12 mui-col-xs-12">
							<img class="mui-pull-left" src="/img/head.jpg" width="30px" />
							<div class="mui-pull-left cj-line-height-30">
								<p class="cj-text-size-12" id="headInfo"></p>
							</div>
						</div>
					</div>
					<div class="cj-user-commit" id="topicConetnt">
					</div>
				</li>
			</ul>
			
			<ul class="mui-table-view"  id="replyList">
				
			</ul>
			<p id="replyHint" style="display:block;" class="mui-text-center cj-bg-gray cj-line-height-40">没有回复</p>
		</div>
		<div th:include="common/footer :: nav"></div>
	</body>
	<script src="/js/mui.min.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/common.js"></script>
	<script>
		var tid = getUrlParam("tid");
		$.ajax({
			url: "/topic/get/" + tid,
			dataType: 'json',
			success: function(response) {
				if(response.code == 200) {
					var date = new Date(response.result.topic_time);
					$("title").text(response.result.topic_title);
					$(".mui-title").text(response.result.topic_title);
					$("#title").text(response.result.topic_title);
					$("#topicConetnt").html(response.result.topic_content);
					$("#headInfo").html("&nbsp; " + response.result.user.name + "    " + date.format('yyyy-MM-dd'));
					if(response.result.replys.length>0){
						$("#replyHint").hide();
					}
					var list = $("#replyList");
					for(var i=0;i<response.result.replys.length;i++){
						var html  = '<li class="mui-table-view-cell">'
									+'<div class="mui-row">'
										+'<div class="mui-col-sm-12 mui-col-xs-12">'
											+'<img class="mui-pull-left" src="/img/head.jpg" width="30px" />'
											+'<div class="mui-pull-left cj-line-height-30">'
												+'<p class="cj-text-size-12" id="headInfo">'
												+'&nbsp;用户昵称&nbsp;&nbsp;2017-05-24'
												+'</p>'
											+'</div>'
										+'</div>'
									+'</div>'
									+'<div class="cj-user-commit" id="topicConetnt">'
									+response.result.replys[i].reply_content
									+'</div>'
								+'</li>';
						list.append(html);
					}
				}
			},
			complete: function(xhr, textStatus) {
				if(xhr.status == 500) {
					mui.alert('帖子不存在或者已经删除', '提示', function() {
						location.href = '/topic';
					});
				}
			}
		});
		
		

		$("#reply").click(function() {
			location.href = '/topic/reply?tid=' + tid;
		});
	</script>

</html>